<template>
  <el-form-item>
    <el-button @click="onSubmit">保存</el-button>
  </el-form-item>
  <h2 style="margin-left: 400px;">过程监控信息</h2>
  <table class="order-table">
    <tr>
      <th colspan="6" style="text-align: left;">基本信息</th>
    </tr>
    <tr>
      <td>产品名称：</td>
      <td><el-input v-model="form.productName" placeholder="请输入产品名称" /></td>
      <td>品牌：</td>
      <td><el-input v-model="form.brand" placeholder="请输入品牌" /></td>
      <td style="width: 100px;">材料名称：</td>
      <td><el-input v-model="form.materialName" placeholder="请输入材料名称" /></td>
    </tr>
    <tr>
      <td>包装规格：</td>
      <td><el-input v-model="form.packingSpecifications" placeholder="请输入包装规格" /></td>
      <td>包装日期：</td>
      <td>
        <el-date-picker v-model="form.packingDate" type="date" placeholder="Pick a date" style="width: 100%" />
      </td>
      <td>包装计划：</td>
      <td><el-input v-model="form.packingPlan" placeholder="请输入包装计划" /></td>
    </tr>
    <tr>
      <td>包装人员：</td>
      <td>
        <el-select v-model="form.packers" placeholder="请选择交班班长">
          <el-option label="秦卓珈" value="秦卓珈" />
          <el-option label="韩一芳" value="韩一芳" />
          <el-option label="刘志宝" value="刘志宝" />
          <el-option label="申莹洋" value="申莹洋" />
          <el-option label="周岚青" value="周岚青" />
          <el-option label="徐如华" value="徐如华" />
          <el-option label="张淑馨" value="张淑馨" />
          <el-option label="郭银汝" value="郭银汝" />
          <el-option label="屈语盼" value="屈语盼" />
          <el-option label="柳泳辉" value="柳泳辉" />
        </el-select>
      </td>
      <td>质检人员：</td>
      <td>
        <el-select v-model="form.qualityInspectors" placeholder="请选择接班班长">
          <el-option label="陶颢瑶" value="陶颢瑶" />
          <el-option label="孟轩" value="孟轩" />
          <el-option label="甄茹语" value="甄茹语" />
          <el-option label="尹兆雨" value="尹兆雨" />
          <el-option label="张隆铭" value="张隆铭" />
          <el-option label="王思凯" value="王思凯" />
          <el-option label="周思绒" value="周思绒" />
          <el-option label="孟辰" value="孟辰" />
          <el-option label="方天奇" value="方天奇" />
          <el-option label="杨金龙" value="杨金龙" />
        </el-select>
      </td>
      <td>设备：</td>
      <td>
        <el-select v-model="form.id" placeholder="请选择设备">
          <el-option label="扎啤机 " :value="1" />
          <el-option label="鲜啤机" :value="2" />
          <el-option label="苦啤机" :value="3" />
          <el-option label="普啤机" :value="4" />
          <el-option label="黑啤机" :value="5" />
          <el-option label="奶啤机" :value="6" />
        </el-select>
      </td>
    </tr>
    <tr>
      <td style="width: 130px;">外观检验结果：</td>
      <td><el-input v-model="form.testResults" placeholder="请输入外观检验结果" /></td>
      <td>喷码/压码效果：</td>
      <td><el-input v-model="form.inkjetEffect" placeholder="请输入喷码/压码效果" /></td>
      <td>密封性：</td>
      <td><el-input v-model="form.tightness" placeholder="请输入密封性" /></td>
    </tr>
    <tr>
      <td>操作合规性：</td>
      <td><el-input v-model="form.compliance" placeholder="请输入操作合规性" /></td>
      <td style="width: 160px;">异常原因分析结果：</td>
      <td colspan="3"><el-input v-model="form.abnormal" type="textarea" placeholder="请输入异常原因分析结果" /></td>
    </tr>
    <tr>
      <td>审核日期：</td>
      <td>
        <el-date-picker v-model="form.auditDate" type="date" placeholder="Pick a date" style="width: 100%" disabled />
      </td>
      <td>审核人：</td>
      <td><el-input v-model="form.reviewers" placeholder="请输入异常原因分析结果" disabled /></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import dayjs from 'dayjs'
import { useCounterStore } from "@/stores/counter";
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import {read,write} from '@/axios/axiosHelper'

const router = useRouter()
const route = useRoute()

const store = useCounterStore();

const form = reactive({
  productName: '',
  brand: '',
  materialName: '',
  packingSpecifications: '',
  packingDate: '',
  packingPlan: '',
  packers: '',
  qualityInspectors: '',
  id: '',
  testResults: '',
  inkjetEffect: '',
  tightness: '',
  compliance: '',
  abnormal: '',
  reviewers: store.counterStore.userName,
  auditDate: ''
});

// 获取当前日期并赋值给审核日期
form.auditDate = dayjs().format('YYYY-MM-DD');

const onSubmit = () => {
  write.post("p2-write/api/Monitor/CreateMonitor", form)
    .then(res => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        router.push('/QueryMonitor')
      }
      else {
        ElMessage.error(res.data.msg);
        return;
      }
    })
}

</script>

<style scoped>
.order-table {
  border-collapse: collapse;
  width: 100%;
}

.order-table th,
.order-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.order-table th {
  background-color: #f2f2f2;
}
</style>

<style scoped>
#app {
  padding: 20px;
}
</style>